<template>
  <div class="header">
    <div class="left">
      <div class="brand-wrap">
        <div class="brand-name">ZEEKR</div>
        <div class="jiaofu"></div>
      </div>
      <div class="title-wrap">
        <span>极氪汽车神秘监测数据大屏</span>
        <img src="@/assets/images/deliver/switch-btn.png" alt="" />
      </div>
    </div>
    <div class="right">
      <!-- <el-config-provider :locale="zhCn">
        <el-date-picker
          v-model="date"
          type="month"
          format="YYYY/MM"
          value-format="YYYY-MM"
          placeholder="选择日期"
          class="custom-date-picker"
          :clearable="false"
        ></el-date-picker>
      </el-config-provider> -->
      <select v-model="yearMonth" class="custom-date-select">
        <option class="custom-date-option" :value="item" v-for="item in list" :key="item">
          {{ item }}
        </option>
      </select>
      <right-time></right-time>
    </div>
  </div>
</template>
<script setup>
// import { ElConfigProvider } from 'element-plus'
// import zhCn from 'element-plus/es/locale/lang/zh-cn'
// import { defineComponent, ref } from 'vue'
// import { ElDatePicker } from 'element-plus'
// import 'element-plus/es/components/date-picker/style/css'
// import '@/assets/reset.css'
// import dayjs from 'dayjs'
import { onMounted, ref, watch, defineEmits } from 'vue'
import { getYearMonth } from '@/api/deliver'
import RightTime from '../header/RightTime.vue'
let list = ref(null)
let yearMonth = ref(getCurrentYearMonth())
const loadData = async () => {
  const { year_month } = await getYearMonth()
  list.value = year_month
}
function getCurrentYearMonth() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1，并补零
  return `${year}/${month}`
}

onMounted(() => {
  loadData()
})
const emit = defineEmits(['child-event'])
watch(
  () => yearMonth.value,
  (val) => {
    emit('child-event', val)
  },
)
// defineComponent({
//   components: {
//     ElDatePicker,
//   },
// })
// const date = ref(dayjs().format('YYYY-MM'))
// const dateChange = (val) => {
//   console.log(val)
//   date.value = val
// }
</script>
<style lang="scss" scoped>
.header {
  width: 1920px;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 40px 10px 0;
  font-family: Source Han Sans CN;
  letter-spacing: 6px;
  font-weight: bold;
  color: #fff4e2;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  background-image: url(@/assets/images/deliver/title-bg.png);
  background-size: cover;
}
.left {
  width: 770px;
  padding: 14px 0 0 24px;
  .brand-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .brand-name {
      font-size: 24px;
    }
    .jiaofu {
      width: 84px;
      height: 24px;
      background-image: url(@/assets/images/deliver/jiaofu-bg.png);
      background-size: cover;
    }
  }
  .title-wrap {
    font-size: 40px;
    line-height: 47px;
    img {
      width: 46px;
      height: 34px;
      margin-left: 24px;
    }
  }
}
.right {
  display: flex;
  align-items: flex-end;
}
.custom-date-select {
  margin-right: 40px;
  background: none;
  color: rgba(255, 88, 65, 1);
  border: none;
  font-size: 24px;
  &:focus-visible {
    outline: none;
  }
  // option {
  //   color: rgba(24, 24, 24, 1);
  // }
}
.custom-date-option {
  background: rgba(24, 24, 24, 1);
  color: rgba(255, 88, 65, 1);
  font-size: 20px;
  &:hover {
    background-color: #e49788;
  }
}
</style>
